<fieldset class="flex flex-wrap gap-3">
  <legend class="sr-only">Color</legend>

  <label
    for="ColorBlack"
    class="block size-8 rounded-full bg-black shadow-sm has-checked:ring-2 has-checked:ring-black has-checked:ring-offset-2"
  >
    <input
      type="radio"
      name="ColorOption"
      value="ColorBlack"
      id="ColorBlack"
      class="sr-only"
      checked
    />

    <span class="sr-only">Black</span>
  </label>

  <label
    for="ColorRed"
    class="block size-8 rounded-full bg-red-500 shadow-sm has-checked:ring-2 has-checked:ring-red-500 has-checked:ring-offset-2"
  >
    <input type="radio" name="ColorOption" value="ColorRed" id="ColorRed" class="sr-only" />

    <span class="sr-only">Red</span>
  </label>

  <label
    for="ColorBlue"
    class="block size-8 rounded-full bg-blue-500 shadow-sm has-checked:ring-2 has-checked:ring-blue-500 has-checked:ring-offset-2"
  >
    <input type="radio" name="ColorOption" value="ColorBlue" id="ColorBlue" class="sr-only" />

    <span class="sr-only">Blue</span>
  </label>

  <label
    for="ColorGold"
    class="block size-8 rounded-full bg-amber-500 shadow-sm has-checked:ring-2 has-checked:ring-amber-500 has-checked:ring-offset-2"
  >
    <input type="radio" name="ColorOption" value="ColorGold" id="ColorGold" class="sr-only" />

    <span class="sr-only">Gold</span>
  </label>
</fieldset>
